<template>
  <div class="add-address">
    <h2>充电桩地址注册</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="name">充电桩名称</label>
        <input type="text" id="name" v-model="address.name" required />
      </div>

      <div class="form-group">
        <label for="longitude">经度</label>
        <input type="text" id="longitude" v-model="address.longitude" required />
      </div>

      <div class="form-group">
        <label for="latitude">纬度</label>
        <input type="text" id="latitude" v-model="address.latitude" required />
      </div>

      <div class="form-group">
        <label for="address">详细地址</label>
        <input type="text" id="address" v-model="address.address" required />
      </div>

      <button type="submit">提交</button>
    </form>

    <!-- 获取当前经纬度的按钮 -->
    <button @click="handleGetLocation">获取当前位置</button>

    <!-- 新增的跳转按钮 -->
    <button @click="redirectToMap">前往查看地图</button>

    <p v-if="message" class="message">{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'AddAddress',
  setup() {
    // 创建表单数据模型
    const address = ref({
      id: null,
      name: '',
      longitude: '',
      latitude: '',
      address: '',
    });

    const message = ref('');

    // 提交表单的方法
    const handleSubmit = async () => {
      try {
        // 向后端发送 POST 请求
        const response = await axios.post('http://localhost:8875/map/add', address.value);

        if (response.data.code === 200000) {
          message.value = '地址添加成功！';
        } else {
          message.value = '添加地址失败！';
        }
      } catch (error) {
        console.error('提交失败:', error);
        message.value = '请求失败，请重试！';
      }
    };

    // 获取当前经纬度的方法
    const handleGetLocation = () => {
      address.value.longitude = 115.468;
      address.value.latitude = 38.872;
      if (navigator.geolocation) {
        // 请求位置信息
        navigator.geolocation.getCurrentPosition(
            (position) => {
              // 获取经度和纬度
              address.value.longitude = position.coords.longitude;
              address.value.latitude = position.coords.latitude;
              message.value = '当前位置已获取！';

              // 调试信息
              console.log('当前位置获取成功');
              console.log('经度:', position.coords.longitude);
              console.log('纬度:', position.coords.latitude);
            },
            (error) => {
              // 处理获取位置失败
              message.value = '无法获取当前位置，请检查浏览器权限设置！';
              console.error('位置获取失败:', error);
              console.log('获取位置时出现错误');
            }
        );
      } else {
        // 浏览器不支持地理位置
        message.value = '浏览器不支持地理位置服务！';
        console.log('浏览器不支持地理位置');
      }
    };

    // 跳转到地图页面
    const redirectToMap = () => {
      window.location.href = 'http://localhost:8080/map/index';
    };

    return {
      address,
      message,
      handleSubmit,
      handleGetLocation,
      redirectToMap,
    };
  },
};
</script>

<style scoped>
.add-address {
  width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  margin-top: 0.5rem;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.message {
  margin-top: 1rem;
  color: green;
}
</style>
